<template>
  <div class="home_page">
    <NavHeader />
    <!-- 首页主体 -->
    <div class="home_content page_tab_bar">
      <!-- 未登录 -->
      <div class="ordinary_user" v-if="!isLogin">
        <div class="home_img">
          <img src="@/assets/home/home_img.png" alt="" />
        </div>
        <div class="login_btn" @click="goPage('/login')">立即登录</div>
      </div>
      <!-- 已登录 -->
      <div class="auth_user" v-else>
        <!-- 首图轮播 -->
        <div class="swiper">
          <img src="@/assets/home/swiper_1.png" alt="" />
        </div>
        <!-- 公告 -->
        <div class="notice" @click="goPage('/notice')">
          <div>
            <img src="@/assets/home/notice_icon.png" alt="" />
          </div>
          <div class="notice_content">公告内容：假如生活欺骗了你呢？</div>
          <div>
            <img src="@/assets/home/right_arrow_icon.png" alt="" />
          </div>
        </div>
        <!-- 资产操作 -->
        <ul class="asset_operate">
          <li
            v-for="(item, index) in assetBtnList"
            :key="index"
            @click="goPage(item.path)"
          >
            <div>
              <img :src="item.icon" alt="" />
            </div>
            <div>{{ item.text }}</div>
          </li>
        </ul>
      </div>
      <!-- 列表展示 tab头部 -->
      <ul class="tab_header" v-if="coinTypeList.length">
        <li
          v-for="(item, index) in coinTypeList"
          :key="index"
          @click="changeTab(index, item)"
        >
          <span :class="{ actived: curHeaderIndex == index }">{{
            item.name
          }}</span>
          <div :class="{ border_bottom: curHeaderIndex == index }"></div>
        </li>
      </ul>
      <!-- 列表展示 tab内容部 -->
      <ul class="tab_content" v-if="socketData.length">
        <li v-for="(item, index) in socketData" :key="index">
          <div class="left">
            <img
              :src="`https://qhzx-kline2.oss-ap-southeast-1.aliyuncs.com/logos/${
                item.symbol.split('/')[0]
              }.png`"
              alt=""
            />
          </div>
          <div class="center">
            <div class="mb">{{ item.symbol }}</div>
            <div class="font_color">{{ item.symbol.split("/")[1] }}</div>
          </div>
          <div class="right">
            <div class="mb">${{ item.last }}</div>
            <div>
              <span class="font_color">-1758</span>
              <span :class="item.raf > 0 ? 'add_number' : 'cut_number'"
                >{{ Number(item.raf * 100).toFixed(2) }}%</span
              >
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 分享 -->
    <ShareDialog ref="shareDialogRef" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import NavHeader from "@/views/home/components/NavHeader.vue";
import ShareDialog from "./components/ShareDialog.vue";
import DepositIcon from "@/assets/home/deposit_icon.png";
import TransferIcon from "@/assets/home/transfer_icon.png";
import ShareIcon from "@/assets/home/share_icon.png";
import NodeIcon from "@/assets/home/node_icon.png";
import { useRouter } from "vue-router";
import { useUserInfo } from "@/stores/userInfo";
import { useStartSpotWebsocket } from "@/utils/hook/useStartSpotWebsocket";

// 获取路由对象
const router = useRouter();
// 获取用户信息
const user = useUserInfo();
// 当前高亮tab头部栏
const curHeaderIndex = ref(1);
// 定义 ref
const shareDialogRef = ref();
// 用户是否为登录状态
const isLogin = ref(false);
// 资产操作列表
const assetBtnList = ref([
  { text: "充值", icon: DepositIcon, path: "/assets/recharge" },
  { text: "转账", icon: TransferIcon, path: "/assets/transfer" },
  { text: "分享", icon: ShareIcon, path: "/share" },
  { text: "节点", icon: NodeIcon, path: "/node" },
]);

const {
  socketData,
  coinTypeId,
  coinTypeList,
  Toime,
  getAllAssort1,
  getAllCoin1,
} = useStartSpotWebsocket();

// 跳转页面
const goPage = (path: string) => {
  if (path == "/share") {
    shareDialogRef.value.visible = true;
    return;
  } else {
    router.push(path);
  }
};

// 切换tab头部栏
const changeTab = (index: number, item: any) => {
  curHeaderIndex.value = index;
  coinTypeId.value = item.id;
  getAllCoin1();
  Toime();
};

// 初始化数据
onMounted(() => {
  const token = localStorage.getItem("token");
  if (token) {
    isLogin.value = true;
  } else {
    isLogin.value = false;
  }
  getAllAssort1("0")
});
</script>

<style lang="scss" scoped>
.home_page {
  .home_content {
    .ordinary_user {
      .home_img {
        width: 100%;
        height: 300px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .login_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 50px;
        background: linear-gradient(to right, #14da62, #0d5eae);
        color: #ffffff;
        border-radius: 10px;
      }
    }
    .auth_user {
      padding-top: 10px;
      height: 350px;
      .swiper {
        height: 190px;
        width: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .notice {
        padding: 0px 10px;
        display: flex;
        margin: 10px 0px;
        margin-top: 15px;
        justify-content: space-between;
        align-items: center;
        border-radius: 15px;
        background-color: #141515;
        padding: 10px;
        div:first-child {
          display: flex;
          align-items: center;
        }
        .notice_content {
          flex: 1;
          margin: 0px 10px;
          color: #babcbf;
        }
      }
      .asset_operate {
        display: flex;
        justify-content: space-between;
        li {
          padding: 10px 30px;
          background-color: #141515;
          border-radius: 15px;
          div {
            font-size: 14px;
            text-align: center;
          }
        }
      }
    }
    .tab_header {
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      color: #babcbf;
      li {
        position: relative;
        .actived {
          color: #ffffff;
        }
        .border_bottom {
          position: absolute;
          top: 26px;
          left: 50%;
          transform: translateX(-50%);
          width: 28px;
          height: 2px;
          background: linear-gradient(to right, #14da62, #0d5eae);
        }
      }
    }
    .tab_content {
      li {
        display: flex;
        margin: 5px 0;
        padding: 10px 0;
        justify-content: space-between;
        align-items: center;
        font-weight: 100;
        .left {
          display: flex;
          align-items: center;
          width: 45px;
          height: 45px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .center {
          flex: 1;
          margin: 0 10px;
        }
        .right {
          div:first-child {
            text-align: right;
          }
          div:last-child {
            font-size: 14px;
            span {
              margin-right: 18px;
            }
            span:last-child {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
  /* 公共样式 */

  .mb {
    margin-bottom: 2px;
  }
}
</style>
